<template>
  <div class="sys" style="width:99%;margin-top:-25px;">
    <!-- 新增用户,导出按钮 -->
    <div class="add-btns">
      <kt-button :label="$t('action.addadmin')" perms="AuthorityManagement:SystemAdministrator:add" type="primary" @click="handleAdd"/>
    </div>
    <!--表格内容栏-->
    <Kt-table class="table-width" admin permsEdit="AuthorityManagement:SystemAdministrator:edit" permsResetPass="AuthorityManagement:SystemAdministrator:resetPass"
              :data="pageResult" :columns="columns"
              @findPage="findPage" @handleEdit="handleEdit"
              @handleResetpass="handleResetpass" @changeSwitch="changeSwitch" >
    </Kt-table>

    <!--新增编辑界面-->
    <el-dialog class="add-pop" :title="operation?'新增':'编辑'" width="30%" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form :model="dataFormAdd" :rules="dataFormRules" ref="dataFormAdd"
               label-position="right">
        <!-- <el-form-item label="ID" prop="id" v-if="false">
                  <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
              </el-form-item> -->
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="dataFormAdd.userName" :disabled="operation?false:true" placeholder="请输入用户名" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="dataFormAdd.email" type="email" auto-complete="off" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="dataFormAdd.phone" type="number" auto-complete="off" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="dataFormAdd.realName" type="text" auto-complete="off" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native="submitForm" v-if="!dataFormAdd.id" :loading="editLoading">{{$t('action.submit')}}</el-button>
        <el-button :size="size" type="primary" @click.native="submitFormEdit" v-if="dataFormAdd.id" :loading="editLoading">{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
    <!-- 重置密码 -->
    <el-dialog class="resetpassword" title="重置密码" width="30%" :visible.sync="resetVisible" :close-on-click-modal="false">
      <el-form  :rules="dataFormRules" ref="password" :model="dataFormAdd" >
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="dataFormAdd.userName" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item class="resetpassword-pass" label="密码" prop="resetpassword">
          <el-input v-model="dataFormAdd.acccountPassword" type="text" auto-complete="off" style="width: 50%;margin-right: 10%"></el-input>
          <!--<el-button :label="('自动生产密码')" @click="autopassword"   perms="" type="primary"  /></el-button>-->
          <el-button :size="size" @click="autopassword" type="primary">{{$t('自动生产密码')}}</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="resetVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native="resetPwd" :loading="editLoading">{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import PopupTreeInput from "@/components/PopupTreeInput";
  import KtButton from "@/views/Core/KtButton";
  import KtTable from "@/views/Core/KtTable";
  import QueryBox from "@/views/Core/QueryBox";
  import axios from "axios";
  export default {
    name: "Person",
    components: {
      PopupTreeInput,
      KtTable,
      KtButton,
      QueryBox
    },
    data() {
      return {
        size: "small",
        // filters: {
        //   name: ""
        // },
        resetpassword: "",
        page: "person",
        columns: [
          { type: "index", label: "序号", minWidth: 50 },
          { prop: "userName", label: "用户名", minWidth: 80 },
          { prop: "realName", label: "真实姓名", minWidth: 100},
          { prop: "email", label: "邮箱", minWidth: 150 },
        ],
        pageRequest: { pageNum: 1, pageSize: 8},
        pageResult: {
          content:[],
          totalSize:""
        },
        operation: false, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        resetVisible: false,
        dataFormRules: {
          userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
          email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
          phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
          realName: [{ required: true, message: "请输入真实姓名", trigger: "blur" }]
        },
        // 新增编辑界面数据
        dataFormAdd: {
          userName:"",
          realName:"",
          phone:"",
          email:"",
          accountStatus:1,
          acccountPassword:"",
          userType:2
        },
        deptData: [],
        deptTreeProps: {
          label: "name",
          children: "children"
        },
        roles:[], //角色类型下拉框

      };
    },
    methods: {
      // 获取分页数据
      findPage: function(data) {
        if (data !== null) {
          this.pageRequest = data.pageRequest;
          this.pageRequest = Object.assign({},{userType:2},this.pageRequest)
        }
        // this.pageRequest.columnFilters = {
        //   name: { name: "name", value: this.filters.name }
        // };
        this.$api.person.findPage(this.pageRequest).then(res => {
          this.pageResult.content = res.userInfoList;
          this.pageResult.totalSize = res.total;
        })
          .then(data != null ? data.callback : "");
      },
      //新增页面展示
      handleAdd:function () {
        this.operation=true
        this.dialogVisible=true
        this.dataFormAdd= {
          userName:"",
          realName:"",
          phone:"",
          email:"",
          acccountPassword:111111,
          accountStatus:1,
          userType:2
        }
      },
      //编辑页面展示
      handleEdit:function (params) {
        this.operation=false
        this.dialogVisible=true
        this.dataFormAdd= Object.assign({}, params.row);
      },
      //重置密码页面展示
      handleResetpass:function (params) {
        this.resetVisible=true
        this.dataFormAdd= Object.assign({}, params.row);
      },
      //密码提交
      resetPwd:function () {
        this.$refs.password.validate(valid => {
          if (valid) {
            this.$confirm("确认重置密码吗？", "提示", {}).then(() => {
              this.data={
                password:this.dataFormAdd.acccountPassword,
                userName:this.dataFormAdd.userName
              }
              this.editLoading = true;
              let params = Object.assign({}, this.data);
              this.$api.person.resetPwd(params).then(res => {
                this.editLoading = false;
                if (res.result == 1) {
                  this.$message({ message: res.msg, type: "success" });
                  this.resetVisible = false;
                  this.$refs["dataFormAdd"].resetFields();
                  this.findPage(null);
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error"
                  });
                }
                this.findPage(null);
              });
            });
          }
        });
      },
      //新增提交
      submitForm:function () {
        this.$refs.dataFormAdd.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              this.editLoading = true;
              let params = Object.assign({}, this.dataFormAdd);
              this.$api.person.save(params).then(res => {
                this.editLoading = false;
                if (res.result == 1) {
                  this.$message({ message: res.msg, type: "success" });
                  this.dialogVisible = false;
                  this.$refs["dataFormAdd"].resetFields();
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error"
                  });
                }
                this.findPage(null);
              });
            });
          }
        });
      },
      //编辑提交
      submitFormEdit:function () {
        this.$refs.dataFormAdd.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              this.editLoading = true;
              let params = Object.assign({}, this.dataFormAdd);
              this.$api.person.edit(params).then(res => {
                this.editLoading = false;
                if (res.result == 1) {
                  this.$message({ message: res.msg, type: "success" });
                  this.dialogVisible = false;
                  this.$refs["dataFormAdd"].resetFields();
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error"
                  });
                }
                this.findPage(null);
              });
            });
          }
        });
      },
      // 自动生成密码
      autopassword: function() {
        var password = "";
        var passLength = 8;
        var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
        //随机数
        for (let i = 0; i < passLength; i++) {
          //循环操作
          var index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）
          password += random[index];
        }
        this.dataFormAdd.acccountPassword = password;
      },
      //switch开关
      changeSwitch:function (data) {
        let userId=data.row.id
        this.$api.person.messageStatus({userId:userId}).then(res =>{
            if (res.result == 1) {
              this.$message({ message: res.msg, type: "success" });
            } else {
              this.$message({message: res.msg, type: "error"
              });
            }
            // this.findPage(null)
          }
        )
      },
    },
    mounted() {
    }
  };
</script>
<style>
  .sys .el-dialog__wrapper .el-form-item__content{
    margin-left: 100px;
  }
</style>
